<section class="content-header">
    <h1>
        {{title}}
    </h1>
</section>

<!-- Main content -->
<section class="content">
    <div class="row">

        <div class="col-md-12">
            <div class="box box-default">
                <div class="box-header with-border">
                    <div class="box-title">
                        <input type="button" class="btn btn-success" (click)="popupVisible = true" value="添加角色">
                        <input type="button" class="btn btn-danger" (click)="delRole()" value="删除角色">
                    </div>
                    <div class="box-tools pull-right">
                        <button type="button" (click)="updateRoles()" class="btn btn-info btn-sm" data-toggle="tooltip" title="保存更改">
                            <i class="fa fa-save"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <dx-data-grid [dataSource]="roleList" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true" 
                    [rowAlternationEnabled]="true" (onSelectionChanged)="selectionChanged($event)">
                        <dxo-paging [pageSize]="10"></dxo-paging>
                        <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
                        </dxo-pager>
                        <dxo-selection mode="multiple"></dxo-selection>
                        <dxi-column [allowEditing]="false" dataField="id" caption="ID" [width]="50">
                        </dxi-column>
                        <dxi-column dataField="name" caption="角色名">
                        </dxi-column>
                        <dxi-column dataField="roleType" caption="角色类型">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="createDate" caption="创建日期">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="updateDate" caption="更新日期">
                        </dxi-column>
                        <dxo-editing mode="form" [allowUpdating]="true">
                        </dxo-editing>
                    </dx-data-grid>
                </div>
            </div>
        </div>
    </div>

    <dx-popup [width]="660" [height]="540" [showTitle]="true" [title]="dialogTitle" [dragEnabled]="false" [closeOnOutsideClick]="true"
        contentTemplate="popoverContent" [(visible)]="popupVisible">
        <div *dxTemplate="let data of 'popoverContent'" class="form">
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="exampleInputEmail1">角色ID(不能重复)</label>
                        <input type="email" class="form-control" name="roleItem.id" [(ngModel)]="roleItem.id" id="exampleInputEmail1" placeholder="roleItem id">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">角色名称</label>
                        <input type="email" class="form-control" name="roleItem.name" [(ngModel)]="roleItem.name" id="exampleInputEmail2" placeholder="roleItem name">
                    </div>
                    <button type="submit" class="btn btn-default pull-right" (click)="saveRoleItem()">保存</button>
                </form>
                <button class="btn btn-default pull-left" (click)="popupVisible = false">取消</button>
            </div>
        </div>
    </dx-popup>

</section>